<script lang="ts" setup>
import { onMounted, ref } from 'vue'

import { Checkbox, Modal } from 'ant-design-vue'
import { useRoute } from 'vue-router'
import { useMessage } from '@/hooks/web/useMessage'

const checked = ref(false)
const phone = ref('')
const transId = ref('')
const smsCode = ref('')
const open = ref<boolean>(false)

function showModal() {
  open.value = true
}

onMounted(() => {
  document.title = '权益-会员包'
})

const route = useRoute()

const { createMessage } = useMessage()

function isValidPhoneNumber(phoneNumber) {
  const phoneRegex = /^1[3-9]\d{9}$/
  return phoneRegex.test(phoneNumber)
}

function sendSms() {
  if (!checked.value) {
    createMessage.success('请先勾选协议')
    return
  }

  if (!phone.value || !isValidPhoneNumber(phone.value)) {
    createMessage.success('请填写正确的手机号')
    return
  }

  console.log(route.query)

  // doAction({

  // }).then((res) => {
  //   open.value = true
  //   showModal()
  // })

  fetch('http://api.ninglu.asia/open/api/v1/action.do', {
    method: 'POST', // 指定请求方法
    headers: {
      'Content-Type': 'application/json', // 设置请求头为JSON
    },
    body: JSON.stringify({
      ...route.query,
      action: 'sms',
      params: {
        phone: phone.value,
      },
    }), // 将数据转换为JSON字符串作为请求体
  })
    .then((response) => {
      if (!response.ok)
        throw new Error(`HTTP error! Status: ${response.status}`)
      return response.json() // 解析JSON响应
    })
    .then((data) => {
      if (data?.code === 0) {
        transId.value = data.data
        showModal()
      }
      else {
        createMessage.error('验证码获取失败')
      }
    }) // 打印解析后的数据
    .catch(error => console.error('Error:', error)) // 捕获错误
}

function validSmsCode() {
  if (!checked.value) {
    createMessage.success('请先勾选协议')
    return
  }

  if (!smsCode.value) {
    createMessage.success('请先填写验证码')
    return
  }

  fetch('http://api.ninglu.asia/open/api/v1/action.do', {
    method: 'POST', // 指定请求方法
    headers: {
      'Content-Type': 'application/json', // 设置请求头为JSON
    },
    body: JSON.stringify({
      ...route.query,
      action: 'valid',
      params: {
        phone: phone.value,
        ...transId.value,
        smsCode: smsCode.value,
      },
    }), // 将数据转换为JSON字符串作为请求体
  })
    .then((response) => {
      if (!response.ok)
        throw new Error(`HTTP error! Status: ${response.status}`)
      return response.json() // 解析JSON响应
    })
    .then((data) => {
      if (data?.code === 0)
        open.value = false
      else
        createMessage.error('网络异常')
    }) // 打印解析后的数据
    .catch(error => console.error('Error:', error)) // 捕获错误
}
</script>

<template>
  <div id="bg" class="bg-style" style="background-color: rgb(230 56 14);">
    <Modal
      v-model:open="open"
      width="100%"
      wrap-class-name="full-modal"
      :footer="null"
    >
      <div class="login-container">
        <a-form>
          <a-form-item class="form-group">
            <label for="phoneNumber">手机号码:</label>
            <a-input
              id="phoneNumber" type="text" name="phoneNumber" required :value="phone"
              disabled
            />
          </a-form-item>
          <a-form-item class="form-group">
            <label for="verificationCode">验证码:</label>

            <a-input v-model:value="smsCode" />
          </a-form-item>
          <div class="form-group">
            <img
              src="./立即领取.png"
              style="width: 100%; height: auto;margin-top: 10px"
              alt="btn"
              @click="validSmsCode"
            >
          </div>
        </a-form>
      </div>
    </Modal>

    <div class="title-style">
      <img
        src="./头图.jpg"
        style="width: 100%; height: auto;"
      >
      <img
        src="./券包.png"
        style="width: 100%; height: auto;"
      >

      <div style="margin-top: 10px">
        <div class="input_box">
          <a-input
            id="inputPhone" v-model:value="phone" name="phone" class="phone1"
            placeholder="请输入手机号码"
          />
        </div>

        <img
          id="myImage"
          src="./立即领取.png"
          style="width: 100%; height: auto"
          alt="btn"
          @click="sendSms"
        >
      </div>

      <div style="display: flex;justify-content: center;align-items: center">
        <Checkbox v-model:checked="checked">
          我已阅读并同意<span>《用户须知》</span>
        </Checkbox>
      </div>

      <img
        src="./产品说明.jpg"
        style="width: 100%; height: auto;"
      >
    </div>
  </div>
</template>

<style>
img {
  width: 100%; /* 使图片宽度为父元素的100% */
  height: 100%; /* 使图片高度为父元素的100% */
  object-fit: scale-down; /* 使图片忽大忽小 */
}

#myImage {
  animation-name: zoomInOut;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.input_box {
  margin: 0 auto;
  width: 80%;
  height: 3.5rem;
  box-sizing: border-box;
  border-radius: 1.5rem;
  background-color: #FFF;
  border: 1px solid #F53717;
  box-shadow: 3px 5px 10px 0 rgba(143, 45, 45, 0.8);
}

#inputPhone {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  line-height: 100%;
  outline: none;
  border: none;
  background: rgba(0, 0, 0, 0);
  text-align: center;
  font-size: 1rem;
  color: #000;
}

@keyframes zoomInOut {
  0%, 100% {
    transform: scale(0.8); /* 起始和结束时大小不变 */
  }
  50% {
    transform: scale(1.1); /* 在中间点放大到原始大小的120% */
  }
}

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f4f4f9;
}

.login-container {
  width: 300px;
  padding: 20px;
  background: transparent;
  border-radius: 10px;
  margin: 0 auto;
  backdrop-filter: blur(10px); /* 适用于支持的浏览器 */
}

.form-group {
  margin-bottom: 15px;
  position: relative;
}

.form-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.8); /* 半透明背景 */
}

.form-group button {
  width: 100%;
  padding: 10px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.form-group button:hover {
  background-color: #0056b3;
}
</style>
